<template>
	<div >
		<div class="load" v-if="loading">loading...</div>
		<location-header :cities="cities"></location-header>
		<location-list 
		:letter="letter"
		:cities="cities"
		:hotCities="hotCities"
		></location-list>
		<location-alphabet 
		@change="handleLetterChange"
		:alphabetList="alphabetList"
		></location-alphabet>
	</div>
</template>

<script>
import locationHeader from "./components/locationHeader.vue"
import locationList from "./components/locationList.vue"
import locationAlphabet from "./components/locationAlphabet.vue"
import axios from 'axios'
export default {
  name: 'Location',
  data(){
	  return{
		  letter:'',
		  cities:{},
		  hotCities:[],
		  alphabetList:[],
		  loading:true
	  }
  },
  methods:{
	  handleLetterChange(letter){
		  this.letter = letter
	  },
	  getLocationData(){
		  axios.get("api/city.json")
			.then(this.getLocationDataSucc)          //getLocationDataSucc相当于ajax的success函数
	  },
	  getLocationDataSucc(res){
		  res = res.data
		  // console.log(res)
		  if(res.data){
			  this.loading = false
			  const data = res.data
			  this.cities = data.cities
			  this.hotCities = data.hotCities
			  this.alphabetList = data.alphabetList
		  }
	  }
  },
  components:{
	  locationHeader,
	  locationList,
	  locationAlphabet
  },
  mounted(){
	  this.getLocationData()            //这是监听页面一开始加载时就执行数据请求函数
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
	.load
	  position:absolute
	  top:7rem
	  left:3.5rem
	  z-index:1011
	  width:1.8rem
	  height:.5rem
	  opacity:.3
	  background:#000
	  color:#fff
	  text-align:center
</style>
